<template>
  <div>
    <v-dialog v-model="dialog" scrollable max-width="85%" :fullscreen="$vuetify.breakpoint.xsOnly">
      <v-card>
        <v-card-title>
          <span class="headline">查看salt_minion</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text class="px-0 py-0">
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm12 md12>
                <v-text-field label="minion_id" v-model="viewSalt.minion_id"></v-text-field>
              </v-flex>
              <v-flex xs12 sm12 md12>
                <v-textarea label="grains" outline rows="18" v-model="viewSalt.grains"></v-textarea>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" small @click.native="dialog=false"><h4>关闭</h4></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-card-title>
      <h3>Salt临时表</h3>
      <v-spacer></v-spacer>
      <v-btn flat color="primary" icon @click.stop="handlerSalt" small><v-icon>cached</v-icon></v-btn>
      <v-text-field
        append-icon="search"
        label="Search"
        single-line
        hide-details
        v-model="search"
      ></v-text-field>
    </v-card-title>
    <v-data-table
            :headers="headers"
            :items="items"
            :pagination.sync="pagination"
            :total-items="totalItems"
            :loading="loading"
            :rows-per-page-items="rowsPerPageItems"
            :no-data-text="etext"
            class="elevation-1">
      <template slot="items" slot-scope="props">
        <td class="datastyle" v-for="(value) in headers" :key="value.id" @click.stop="openSaltView(props.item.id)">{{props.item[value.value]}}</td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('listsalt')
export default {
  name: 'listsalt',
  data: function () {
    return this.$store.state.listsalt
  },
  watch: {
    pagination: function () {
      this.handlerSalt()
    },
    search () {
      this.handlerSalt()
    }
  },
  methods: {
    ...mapActions({
      handlerSalt: 'handlerSalt',
      loadSaltHeaders: 'loadSaltHeaders',
      openSaltView: 'openSaltView'
    })
  },
  mounted () {
    this.loadSaltHeaders()
  }
}
</script>
